<template>
    <div class="industry" v-if="pageData">
        <div class="modules">
            <div class="module-1"></div>
            <div class="module-2"></div>
            <div class="module-3"></div>
        </div>
        <div class="info info-1">协助医院完成<span>{{pageData.number}}</span>台设备盘点，估值达<span>{{num[0]}}</span>{{num[1]}}</div>
        <div class="info info-2">实现多维度同步盘点，高效、便捷</div>
        <div class="info info-3">Ⅱ、Ⅲ类医疗器械云台账准确率提升至 <span>100%</span></div>
        <div class="focus-line">
            <svg class='svg-line' x="0px" y="0px" viewBox="0 0 240 230">
                <path id="svg-path-5" class="svg-path"></path>
                <circle class="dot-circle" xmlns="http://www.w3.org/2000/svg" cx="225" cy="5" r="5" stroke="#2eeec9" fill="#2eeec9"></circle>
            </svg>
            <div class="desc">
                <p>对设备关注度超过行业</p>
                <p>90%</p>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        props: {
            pageData: {
                type: [Array, Object]
            }
        },
        data () {
            return {}
        },
        computed: {
            num: function (){
                let newArr = []
                if(this.pageData && this.pageData.value){
                    let arr = this.pageData.value.split('')
                    let len = this.pageData.value.length
                    newArr.push(arr.splice(0, len - 2).join(''))
                    newArr.push(arr.splice(0, arr.length).join(''))
                    return newArr
                }
            }
        },
        mounted () {
        },
        components: {},
        watch: {
            pageData: function (n, o) {
            }
        }
    }
</script>
<style lang='scss' rel="stylesheet/scss">
    .publickPostion{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .industry{
        background-image: url("../../assets/images/industry-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        .info{
            color: #0b5cdc;
            position: absolute;
            width: 63%;
            left: 6%;
            top: 53%;
            font-size: 2.4rem;
            padding-left: 13%;
            height: 7rem;
            letter-spacing: 2px;
            line-height: 5rem;
            >span{
                color: #2eeec9;
                font-size: 4rem;
                font-family: 'DIGIT';
                padding: 0 10px;
            }
            &.info-1{
                background-image: url("../../assets/images/num-1.png");
                background-repeat: no-repeat;
                background-position: left top;
            }
            &.info-2{
                top: 69%;
                line-height: 7rem;
                background-image: url("../../assets/images/num-2.png");
                background-repeat: no-repeat;
                background-position: left top;
            }
            &.info-3{
                top:86%;
                background-image: url("../../assets/images/num-3.png");
                background-repeat: no-repeat;
                background-position: left top;
            }
        }
        .modules{
            position: absolute;
            width: 100%;
            height: 33%;
            background-image: url("../../assets/images/screen.png");
            @extend .publickPostion;
            .module-1{
                width: 100%;
                height: 94%;
                left: -1%;
                @extend .publickPostion;
                background-image: url("../../assets/images/line.png");
                animation: moduleLineAni 3s infinite linear;
            }
            .module-2{
                width: 100%;
                height: 94%;
                right: -1%;
                @extend .publickPostion;
                background-image: url("../../assets/images/circle.png");
                animation: circleAni 3s infinite linear;
            }
            .module-3{
                width: 100%;
                height: 94%;
                top: 0;
                @extend .publickPostion;
                background-image: url("../../assets/images/column.png");
                animation: columnAni 3s infinite linear;
            }
        }
        .focus-line{
            position: absolute;
            width: 240px;
            height: 230px;
            top: 15%;
            left: 15%;
            >svg{
                position: absolute;
                >path{
                    fill: none;
                    stroke: #2eeec9;
                    stroke-width: 4px;
                }
                .dot-circle{
                    opacity: 0;
                }
            }
            .desc{
                width: 26.5rem;
                height: 13rem;
                bottom: -64%;
                left: -41%;
                color: #2eeec9;
                text-align: center;
                opacity: 0;
                background-image: url("../../assets/images/right-top.png");
                @extend .publickPostion;
                >p{
                    &:nth-child(1){
                        margin: 10% 0 0 0;
                        font-size: 2rem;
                    }
                    &:nth-child(2){
                        font-family: 'DIGIT';
                        font-size:5rem;
                        margin-top: 5%;
                        letter-spacing: 5px;
                    }
                }
            }
        }
    }
    .showCurrentPageModule{
        .focus-line{
            .dot-circle{
                animation: defaultOpacityAni .1s linear 0.3s;
                animation-fill-mode: forwards;
            }
            .desc{
                animation: defaultOpacityAni 0.2s linear 1s;
                animation-fill-mode: forwards;
            }
        }
    }
    @keyframes moduleLineAni{
        50% {left: 0}
        100%{left: -1%}
    }
    @keyframes circleAni{
        50% {right: 0}
        100%{right: -1%}
    }
    @keyframes columnAni{
        50% {top: 1%}
        100%{right: 0}
    }
</style>